import { useState, useEffect } from 'react'
import logo from './logo.svg'
import './App.css'
import classnames from 'classnames'
// classnames 解决多样式名的 添加删除
// 参见：https://www.npmjs.com/package/classnames
import 'weui'
import 'react-weui/build/dist/react-weui.css'
import WeUI from 'react-weui'
import Contest from './components/contest'
import { getContestData } from './api/request'
// 网络请求接口引入

const {
  Toast
} = WeUI

function App() {
  const [tab, setTab] = useState('all')
  const [showLoading, setShowLoading] = useState(false)
  const [tabClasses, setTabClasses] = useState(['item'])
  const [list, setList] = useState([])
  useEffect(() => {
    setTimeout(() => {
      setTab('dj')
    }, 2000)
  })// 挂载监听
  useEffect(() => {
    // console.log('tab更新监听')
    // setShowLoading(true);
    // ? 为啥这个区域的代码识别不了？
    // 答：立即执行函数前function括号问题，加；解决
    (async () => {
      setShowLoading(true)
      let { data } = await getContestData()
      console.log(data)
      setList([
        ...data
      ])
      setShowLoading(false)
    })()
    // fetch(`https://www.fastmock.site/mock/759aba4bef0b02794e330cccc1c88555/beers/match`)
    //   .then(data => data.json())
    //   .then(data => {
    //     setList([
    //       ...data
    //     ])

  }, [tab])
  //   // tabClasses.push('current')
  //   setTabClasses([
  //     ...tabClasses,
  //     'current'
  //   ])

  // useEffect(() => {
  //   if (list.length > 0) {
  //     setShowLoading(false)
  //   }
  // }, [list])
  // 1. 完整生命周期、2. 更新、3.监听
  return (
    <div className="App">
      {/* <a href="#" className="item {tab === 'all' ? 'current' : ''}" >全部</a> */}
      {/* 花括号不能放引号内，因为会被引号识别为字符串 */}
      {/* <a href="#" className={tabClasses.join(' ')} >全部</a> */}
      {/* <a href="#" className={tab == 'all' ? tabClasses.push('all').join(' ') : ''} >全部</a> */}
      <Contest data={list} />
      <a href="#" className={classnames('item', { current: tab == 'all' })} >全部</a>
      <Toast icon="waiting-circle" show={showLoading}>---加载中---</Toast>
    </div>
  )
}

export default App
